<template>
  <div>
    <!-- 头部容器 -->
    <el-container>
      <el-header>
        <div class="top">
          <div class="lrft"><img src="../assets/132.png" alt="" /></div>
          <h3>电商后台管理</h3>
          <div class="lrft">
            <el-button type="info" @click="goLogin">退出</el-button>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="flag ? '50px' : '200px'">
          <!-- 弹出收起 -->
          <div class="tog">
            <i
              :class="flag ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
              @click="flag = !flag"
            ></i>
          </div>
          <!-- 侧边栏 -->
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            unique-opened
          >
            <el-submenu
              :index="'' + item.path"
              v-for="(item, index) in list"
              :key="index"
            >
              <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span>{{ item.authName }}</span>
              </template>
              <!-- 跳转页面 -->
              <el-menu-item-group>
                <el-menu-item
                  :index="'/' + ele.path"
                  v-for="(ele, i) in item.children"
                  :key="i"
                  >{{ ele.authName }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
          <!-- 侧边栏 -->
        </el-aside>
        <el-main>
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 坑 -->
          <router-view></router-view>
          <!-- 坑 -->
        </el-main>
      </el-container>
    </el-container>

    <!-- 头部容器 -->
  </div>
</template>

<script>
import { menus } from "@/request/api.js";

export default {
  data() {
    return {
      //状态
      flag: false,
      list: [],
    };
  },
  methods: {
    //退出
    goLogin() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
    //请求
    menus() {
      menus().then((res) => {
        // console.log(res);
        this.list = res.data.data;
      });
    },
  },
  created() {
    this.menus();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.el-header,
.el-footer {
  background-color: #373d41;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #373d41;
  color: #333;
  text-align: center;
  //   line-height: 200px;
  //   height: 90vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  //   line-height: 160px;
  // line-height: 90vh;
  height: 91vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.top {
  width: 100%;
  display: flex;
  height: 60px;
  justify-content: space-between;
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  h3 {
    color: #fff;
    margin-right: 1150px;
  }
}
.tog {
  text-align: center;
  font-size: 22px;
  background: #324057;
  color: white;
}
</style>
